// Vue3 中的响应式是基于 ES6 中的 Proxy 实现的
// 注意：在支持 Proxy 的浏览器中基于 Proxy 实现，在不支持 Proxy 的浏览器中依旧是基于 Object.defineProperty 实现
let obj1 = {
  name: 'cy',
  age: 18
}

let arr1 = [1, 2, 3]

function func1(target) {
  return new Proxy(target, {
    get(obj, key) {
      console.log(key)
      console.log('收集依赖')
      return obj[key]
    },
    set(obj, key, val) {
      console.log(key, val)
      obj[key] = val
      console.log('触发视图更新')
      // set 方法有时会连续执行，因此需要返回 true 告知上一步操作执行成功，否则下一步操作就会出问题
      return true
    }
  })
}

let state1 = func1(obj1)
state1.name = 'yun'
console.log(state1.name)

let state2 = func1(arr1)
state2.push(4)
console.log(state2.length)